<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>帮教小组管理</title>
<link href="${request.contextPath}/static/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/cb.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/static/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/js/laypage/skin/laypage.css" />
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/laydate/laydate.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/laypage/laypage.js"></script>
<script src="${request.contextPath}/static/js/vue/vue.min.js" charset="utf-8"></script>

</head>
<body >
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/static/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif" width="10" height="16" /></td>
						<td width="104" align="left" class="biao">查找矫正人员</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<table width="80%" border="0" cellspacing="1" cellpadding="3">
					<tr>
						<td width="10%" align="right"><strong>矫正单位：</strong></td>
						<td width="15%" align="left" >
							<input id="jdName" data-options="prompt:'请选择矫正单位'"/>
						</td>
						<td width="10%" align="right"><strong>姓名：</strong></td>
						<td width="15%" align="left" ><input id="name" size="25" class="easyui-textbox" data-options="prompt:'请输入矫正人员姓名'"/></td>
						<td width="10%" align="right"><strong>证件号码:</strong></td>
						<td width="20%" align="left"><input id="papersnum" size="35" class="easyui-textbox" data-options="prompt:'请输入矫正人员证件号码'"/></td>
						<td width="5%" align="left"><input type="button" value=" 查找 " onclick="app.getCpList()" /></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" >
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/static/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/static/images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">矫正人员列表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/static/images/b2.jpg"><img src="${request.contextPath}/static/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4" id="app">
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">所属单位</td>
			<td align="center" bgcolor="#EFFBFE">姓名</td>
			<td align="center" bgcolor="#EFFBFE">性别</td>
			<td align="center" bgcolor="#EFFBFE">出生日期</td>
			<td align="center" bgcolor="#EFFBFE">证件号码</td>
			<td align="center" bgcolor="#EFFBFE">监督人统计</td>
			<td align="center" bgcolor="#EFFBFE">管理操作</td>
		</tr>
		<tr v-for="(item,index) in cpList" onmouseout="this.style.backgroundColor='#ffffff'" bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">
			<td height="25" align="center"><span v-text="startIndex+index"></span></td>
			<td align="center" ><strong v-text="item.jdName"></strong></td>
			<td align="center" v-text="item.cpName"></td>
			<td align="center" v-text="item.sex"></td>
			<td align="center" v-text="item.birthday"></td>
			<td align="center" v-text="item.papersnum"></td>
			<td align="center" v-text="item.dCount | 0"></td>
			<td align="center"><input type="button" @click="lookEvent(item.id)" value="查看小组" /> <input type="button" @click="editEvent(item.id)" value="修改小组" /></td>
		</tr>
		<tr>
			<td colspan="8" align="center">
				<div id="pagediv"></div>
			</td>
		</tr>
	</table>
<!-- 查看帮教小组弹出框 -->
<div id="dlag" ></div>
<!-- 修改帮教小组弹出框 -->
<div id="dlag2"></div>
</body>
<script type="text/javascript">

	$('#jdName').combobox({    
	    url:'${request.contextPath}/judicialDeptment/queryAll',    
	    valueField:'id',    
	    textField:'name',
	    loadFilter:function(res){
	    	var value=res.data;
	    	return value;
	    }
	});

	var app = new Vue({
		el : '#app',
		data : {
			cpList: [],
			startIndex : 1,
			currPage:1,
			pageSize:5,
			editId:''
		},
		mounted : function() {
			this.$nextTick(function() {
				this.getCpList();
			});
		},
		methods : {
			//得到帮教小组列表
			getCpList:function(curr){
				$.ajax({
		            url:'querylike',
		            data:{
		            	jid:$("#jdName").val(),
		                name:$("#name").val(),
		                papersnum:$("#papersnum").val(),
		                pageNum:curr || 1,
		                pageSize:app.pageSize
		            },
		            type:'get',
		            dataType:'json',
		            success:function(res){
		                app.cpList=res.data[0].result;
		                app.startIndex=(res.data[0].curPageNum-1)*res.data[0].pageSize+1;
		                laypage({
		                    cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
		                    pages : res.data[0].totalPage, //总页数
		                    first : "首页",
		                    last : "尾页",
		                    skip : true, //是否开启跳页
		                    skin : '#5675A2',
		                    curr : curr || 1, //当前页
		                    jump : function(obj, first) { //触发分页后的回调
		                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
		                        	app.currPage=obj.curr;
		                        	app.getCpList(obj.curr);
		                        }
		                    }
		                });
		           	}
		     	});	 
			},
			updateGroup:function(id,pList,gList){
				$.ajax({
		            url:'update',
		            data:{
		            	cid:id,
		            	pList:pList,
		            	gList:gList
		            },
		            success:function(res){
		                if(res.code==0){
		                    app.getCpList(app.currPage);
		                }
		                app.showMsg(res.message);
		            }
		        });
			},
			showMsg: function(msg){
		    	$.messager.show({
		    		title:'提示',
		    		msg:msg,
		    		timeout:5000,
		    		showType:'slide',
		    	});
		    }
		}

	});
	

	 //监听查看事件
    var lookEvent=function(id){
	   	$('#dlag').dialog({    
	   	    title: '查看帮教小组',    
	   	    width: '900px',    
	   	    height: '500px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'tolook?id='+id,    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'关闭',
				handler:function(){
					$('#dlag').dialog('close');
				}
			}]
	   	});
    }
   
  
    //修改事件
   	var editEvent= function(id) {
		app.editId=id;
   		$('#dlag2').dialog({    
	   	    title: '修改帮教小组',    
	   	    width: '900px',    
	   	    height: '500px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'page?page=work-manage/group_edit',    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					var pList=[],gList=[];					
					for(i in vm2.pList)
						pList.push(vm2.pList[i].pId);
					for(i in vm3.gList)
						gList.push(vm3.gList[i].id);
					app.updateGroup(id,pList,gList);
					$('#dlag2').dialog('close');
				}
			},{
				text:'取消',
				handler:function(){
					$('#dlag2').dialog('close');
				}
			}]
	   	});
	}
 	
   
</script>
</html>